<template lang="">
  <div class="box" ref="box">
    
  </div>
</template>
<script>
// import * as echarts from "echarts"
export default {
  name: "LineOne",
  mounted() {
    let myChart = echarts.init(this.$refs.box)
    let option = {
      //图例
      legend:{
        top:"10%",      //位置
        textStyle:{     //文字
          color:"#4997f7"
        }
      },
      //标题
      title: {
        text: "大洲感染总人数趋势图",     //标题文本
        textAlign: "center",            //水平居中
        left: "50%",                    //标题位置
        //标题样式
        textStyle: {                
          color: "white",
          fontWeight: "normal"
        }
      },
      //x轴
      xAxis: {
        //x轴是类目轴
        type: "category",
        data:["02/14","04/11","06/06","08/01","09/26","11/21"],
        //是否有间隙
        boundaryGap:false,
        axisLabel: {
          color: "#4c9bfd"
        },
        //坐标轴轴线
        axisLine: {
          lineStyle: {
            color: "#4c9bfd"
          }
        },
        //刻度
        axisTick: {
          lineStyle: {
            color: "4c9bfd"
          }

        }


      },
      //y轴
      yAxis: {
        //y轴为数值轴
        type: "value",
        //y轴的文字标签
        axisLabel: {
          color: "#4c9bfd"
        },
        //分割线    
        splitLine:{
          lineStyle:{
            color:"#012f4a"
          }
        },
        //轴线
        axisLine:{
          show:true,
          lineStyle:{
            color:"#012f4a"
          }
        }


      },
      //系列
      series: [
        {
          name:"亚洲",        //显示legend，系列必须设置name
          type: "line",       //折线
          smooth:true,
          data: [30000000, 31000000, 38000000, 41000000, 5000000, 8000000, 10000000]
        },
        {
          name:"北美洲",
          type: "line",
          smooth:true,
          data: [2000000, 1000000, 18000000, 21000000, 2000000, 1000000, 9000000]
        },
        {
          name:"大洋洲",
          type: "line",
          smooth:true,
          data: [12000000, 21000000, 34000000, 43000000, 1300000, 2300000, 16000000]
        },
        {
          name:"欧洲",
          type: "line",
          smooth:true,
          data: [19000000, 28000000, 32000000, 38000000, 4500000, 7800000, 9000000]
        },{
          name:"其它",
          type: "line",
          smooth:true,
          data: [21000000, 18000000, 19000000, 21000000, 4500000, 6700000, 8000000]
        }
      ],
      //网格（小盒子）
      grid: {
        show:true,
        bottom: 25,
        left: 75,
        borderColor:"#012f4a"
      },

    }
    myChart.setOption(option)


  },


}
</script>
<style lang="less" scoped>
.box {
  height: 250px;
}
</style>